<template>
  <div style="margin-left: 5px;">
    <div>
      <h3 style="display:inline-block">{{Data.CodeNum}}.</h3>
      <span v-html="Data.Title"></span>
      <el-input-number
        style="margin-left:10px"
        size="mini"
        v-if="Data.TitleBlank"
        @change="checkItem()"
        :controls="false"
        v-model="Data.BlankValue"
      ></el-input-number>
      <el-button @click="divvisibility(1)" type="text" style="float:right" v-if="!preview">{{see}}</el-button>
    </div>
    <div v-if="visible">
      
      <!-- 选项横置 -->
      <div class="option-area" style="margin: 5px;" v-if="!lixian">
        <div class="optionLayout" v-if="Data.OrderValue==1">
          <div id="input-area" v-for="opt in Data.Options" :key="opt.itemId">
            <table>
              <tr style="float:left">
                <td>
                  <el-radio
                    :label="opt.itemId"
                    v-model="Data.SelValue"
                    @click="cid=opt.itemId"
                  >{{opt.itemName}}</el-radio>
                </td>

                <td>
                  <div v-if="opt.canFillBlank">
                    <el-input
                      v-if="Data.DataTypes!=1"
                      size="mini"
                      v-model="opt.blankText"
                      style="width:100px"
                    />
                    <el-input-number size="mini" v-if="Data.DataTypes==1" v-model="opt.blankText"></el-input-number>
                  </div>
                </td>
                <td>
                  <el-alert
                    v-if="opt.memo!=''"
                    v-bind:title="opt.memo"
                    type="info"
                    :closable="false"
                  ></el-alert>
                </td>
              </tr>
            </table>
          </div>
        </div>
         <!-- 选项竖排放置 -->
          <div v-if="Data.OrderValue==0" >
            <el-row align="middle" :gutter="20" v-for="opt in Data.Options">
              <div id="input-area" style="margin: 1px; width:100%;margin-left:5px">
                <table>
                  <tr style="float:left">
                    <div>
                      <td>
                        <div align="center">
                          <tr>
                            <el-radio :label="opt.itemId" v-model="Data.SelValue">{{opt.itemName}}</el-radio>
                          </tr>
                          <tr>
                            <img v-show="opt.ImageUrl!=' '" :src="opt.ImageUrl">
                          </tr>
                        </div>
                      </td>

                      <td>
                        <div v-if="opt.canFillBlank">
                          <el-input
                            v-if="Data.DataTypes!=1"
                            size="mini"
                            v-model="opt.blankText"
                            style="width:100px"
                          />
                          <el-input-number
                            size="mini"
                            v-if="Data.DataTypes==1"
                            v-model="opt.blankText"
                          ></el-input-number>
                        </div>
                      </td>

                      <td>
                        <el-alert
                          v-if="opt.memo!=''"
                          v-bind:title="opt.memo"
                          type="info"
                          :closable="false"
                        ></el-alert>
                      </td>
                    </div>
                  </tr>
                </table>
              </div>
            </el-row>
          </div>
        </div>

        <!-- 离线表格模式 -->
         <div v-if="lixian">
          <table border="1px" cellspacing="0" v-if="type" style="width: 500px;"> 
            <!-- 一列 -->
             <tr v-for="(opt,index) in Data.Options" :key="opt.itemName">
              <td>{{opt.itemName}}</td>
              <td>{{index+1}}</td>
            </tr>
          </table> 

          <!-- 两列 -->
           <table border="1px" cellspacing="0" style="width: 500px;" v-if="!type">
            <td style="width:50%">
              <tr class="r" v-for="(item,index) in opt" :key="item.itemName" style="bac">
                <td style="width:200px;border-left:none;">{{item.itemName}}</td>
                <td class="r">{{index+1}}</td>
              </tr>
            </td>

            <td style="width:50%">
              <tr v-for="(item,index) in  opt2 " :key="item.itemName" style="width: 100%;">
                <td style="width:200px;border-left:none;">{{item.itemName}}</td>
                <td class="r">{{index+num+1}}</td>
              </tr>
            </td>
          </table>
        </div>
      <div>
      <el-button type="text" @click="lixian=!lixian">离线模式</el-button>
      <el-button type="text" @click="cul=1">单列</el-button>
      <el-button type="text" @click="cul=2">双列</el-button>
      </div>
    </div>
     
     <div id="editor" v-if="ifEditor" style="margin: 5px;">
      <el-card class="box-card" style="margin-top:20px">
        <EditorComponent v-model="Data.Title"/> 
        <div class="radius" style="border-radius:2px; height:50px">
          <table class="setting-table" style="width:100%;float:left">
            <tr>
              <td>
                <el-checkbox v-model="Data.MustAnswer">必答题</el-checkbox>
              </td>

              <td>
                <el-checkbox v-model="Data.TitleBlank">标题可以填空</el-checkbox>
              </td>

              <td>
                <BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent>
              </td>

              <td>
                <DataTypeSelector @EvGetDataType="SetDataType"/>
              </td>

              <td>
                <OrderByComponent v-model="Data.OrderValue"/>
              </td>
            </tr>
          </table>
        </div>
       
        <el-table :fit="true" :data="Data.Options" style="width: 100%">
          <el-table-column label="选项文字">
            <template slot-scope="scope">
              <div id="title-row">
                <el-input
                  size="small"
                  style="display: inline-block;"
                  v-model="scope.row.itemName"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display: inline-block;margin-top: 5px;">
                <el-button
                  type="warning"
                  @click="remove(scope.row.itemId)"
                  size="mini"
                  style="display: inline-block;"
                  icon="el-icon-minus"
                  circle
                ></el-button>
                <el-button
                  type="danger"
                  @click="insert(scope.row.itemId)"
                  size="mini"
                  style="display: inline-block;"
                  icon="el-icon-plus"
                  circle
                ></el-button>
                <el-button
                  size="mini"
                  style="display: inline-block;"
                  @click="moveUp(scope.row.itemId)"
                  icon="el-icon-top"
                  circle
                ></el-button>
                <el-button
                  size="mini"
                  style="display: inline-block;"
                  @click="moveDown(scope.row.itemId)"
                  icon="el-icon-bottom"
                  circle
                ></el-button>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="图片">
            <template slot-scope="scope">
              <ImageBase64Componet
                @HasGotImage="savepicture"
                @clearpicture="clearpicture(scope.row.itemId)"
                :param="scope.row.itemId"
              ></ImageBase64Componet>
            </template>
          </el-table-column>

          <el-table-column label="说明">
            <template slot-scope="scope">
              <el-input v-model="scope.row.memo" size="small" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="允许填空">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.canFillBlank"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column prop="defaultSel" label="默认">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.defaultSel"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column v-if="Data.DataType==1" prop="defaultSel" label="最小值">
            <template slot-scope="scope">
              <el-input-number size="mini" v-model="scope.row.MinValue"></el-input-number>
            </template>
          </el-table-column>

          <el-table-column v-if="Data.DataType==1" prop="defaultSel" label="最大值">
            <template slot-scope="scope">
              <el-input-number size="mini" v-model="scope.row.MaxValue"></el-input-number>
            </template>
          </el-table-column>

        </el-table> 
        <el-button type="warning " style="margin-top:5px;width:100%" @click="ifEditor=false">完成编辑</el-button>
      </el-card>
    </div> 
   
   
  
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import RadioSelOption from "./ts/RadioSelOption";
import TBaseQuestion from "./ts/TBaseQuestion";
import RadioSelSubject from "./ts/RadioSelSubject";
import { QuestionDataTypes, QuestionTypes } from "./ts/QuestionDataTypes";
import DataTypeSelector from "./DataTypeSelector.vue";

import EditorComponent from "./EditorComponent.vue";
import OrderBy, { OrderByTypes } from "./ts/OrderByTypes";
import OrderByComponent from "./OderByComponent.vue";
import BatchAddComponent from "./BatchAddComponent.vue";
import ImageBase64Componet from "./ImageBase64Componet.vue";
import QuestionSubject from "./ts/QuestionSubject";
@Component({
  components: {
    EditorComponent,
    DataTypeSelector,
    OrderByComponent,
    BatchAddComponent,
    ImageBase64Componet
  }
})
export default class radioSelComponent extends TBaseQuestion<
  RadioSelOption,
  RadioSelSubject
> {
  $name: string = "radioSelComponent";
  //选中itemid
  cid!: string;
  ifEditor=true;
  itemname = "";
  options: RadioSelOption[] = [];
  msg: string = "";
  gotMsg: string[] = [];

  type = true;
  cul = 1;
  opt!: RadioSelOption[];
  opt2!: RadioSelOption[];
  num = 0;

  //获取初始item
  itemNameArry() {
    this.itemname = this.getOptionText();
  }
  //接收图片地址
  savepicture(id: string, url: string) {
    console.log(id);
    let opt = this.Data.Options;
    let option = opt[opt.findIndex(item => item.itemId === id)];
    option.ImageUrl = url;
  }

  @Watch("msg")
  getstr() {
    this.gotMsg = this.msg.split("\n");
    this.gotMsg.forEach(element => {
      if (element != " ") {
        var opt = new RadioSelOption();
        opt.itemName = element;
        this.options.push(opt);
      }
    });
    this.Data.Options = this.options;
    this.options = [];
  }
  //清除图片
  clearpicture(id: string) {
    let opt = this.Data.Options;
    let option = opt[opt.findIndex(item => item.itemId === id)];
    option.ImageUrl = " ";
  }

  //获取options中每一项的name
  getOptionText(): string {
    let options = "";
    let n = this.Data.Options.length;
    for (let i = 0; i < n; i++) {
      if (i < n - 1) {
        options += this.Data.Options[i].itemName + "\n";
      } else {
        options += this.Data.Options[i].itemName;
      }
    }
    return options;
  }
  constructor() {
    super(RadioSelOption, RadioSelSubject);
    this.Data.QuestionType = QuestionTypes.qtRadio;

    //this.Data.DataType= QuestionDataTypes.dtText;
    //this.Data.Title="设置标题";

    for (var i: number = 0; i < 5; ++i) {
      var opt = new RadioSelOption();
      opt.itemName = "选项" + i;
      this.Data.Options.push(opt);
    }
  }

  mounted() {
    super.mounted();
    this.initProps();
    console.info("radioSelComponent mounted!");
  }
  //根据输入值选中相关的选项
  checkItem(): void {
    this.Data.Options.forEach(opt => {
      if (
        opt.MinValue <= this.Data.BlankValue &&
        this.Data.BlankValue <= opt.MaxValue
      ) {
        this.Data.SelValue = opt.itemId;
        console.info("checked value:" + this.Data.SelValue);
      }
    });
  }
  //输入框内容改变
  inputchange() {
    this.msg = this.getOptionText();
  }
  //删除选项
  remove(str: string): void {
    super.remove(str);
    this.msg = this.getOptionText();
  }
  //插入选项
  insert(id: string): void {
    let options = this.Data.Options;
    options.splice(
      options.findIndex(item => item.itemId === id) + 1,
      0,
      this.createNewOption(RadioSelOption)
    );
    this.msg = this.getOptionText();
  }
  //向上移动选项
  moveUp(id: string): void {
    super.moveUp(id);
    this.msg = this.getOptionText();
  }
  moveDown(id: string) {
    super.moveDown(id);
    this.msg = this.getOptionText();
  }

  getQuestionData(): any {
    return this.Data;
  }

  setQuestionData(data: string) {}

  getTitle(): void {
    // console.info(Data.Title);
    // this.Data.Title;
  }

  setTitle(txt: string): void {
    console.info(txt);
  }

  SetDataType(dType: QuestionDataTypes) {
    this.Data.DataType = dType;
  }

  SetOrderByX(order: OrderByTypes) {
    this.Data.OrderValue = order;
  }
  //离线模式
  @Watch("cul")
  chang() {
    if (this.cul == 1) {
      this.type = true;
    }
    if (this.cul === 2) {
      this.opt = [];
      this.opt2 = [];
      let items = this.Data.Options;
      this.num = Math.ceil(this.Data.Options.length / 2);
      for (let i = 0; i < this.Data.Options.length; i++) {
        if (i < this.num) {
          this.opt.push(items[i]);
        } else {
          this.opt2.push(items[i]);
        }
      }
      if (this.opt.length > this.opt2.length) {
        this.opt2.push(new RadioSelOption());
      }
      this.type = false;
    }
  }
}
</script>
 
<style>
.optionLayout {
  display: flex;
  display: -webkit-flex;
  border: 1px solid gainsboro;
  flex-flow: row wrap;
  width: 100%;
  align-items: center;
  justify-content: left;
}
.setting-table td {
  text-align: center;
  vertical-align: middle;
}
table {
  width: 100%;
  font-size: 14px;
  margin-top: 5px;
}

.divstyle {
  border: 1px solid #c0c0c0;
}

.el-card__header {
  padding-top: 5px;
}
.r {
  width: 40px;
  border-right: none;
}
.tui table tr td {
  border: 1px solid #ccc;
}
.tui table tr th {
  border: 1px solid #ccc;
}
</style>
